<template>
  <div class="container">
      <el-table
            :data="tableData"
                  :span-method="objectSpanMethod"
                        border
                              style="width: 100%">
                                    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                                          <el-table-column prop="department" label="部门" align="center"></el-table-column>
                                                <el-table-column prop="position" label="职位" align="center"></el-table-column>
                                                      <el-table-column prop="salary" label="薪资" align="center"></el-table-column>
                                                          </el-table>
                                                            </div>
                                                            </template>

                                                            <script>
                                                            export default {
                                                                  data() {
                                                                          return {
                                                                                    tableData: [
                                                                                                { name: '张三', department: '技术部', position: '前端开发', salary: 12000 },
                                                                                                        { name: '张三', department: '技术部', position: '前端开发', salary: 12500 },
                                                                                                                { name: '李四', department: '技术部', position: '后端开发', salary: 13000 },
                                                                                                                        { name: '王五', department: '技术部', position: '后端开发', salary: 13500 },
                                                                                                                                { name: '赵六', department: '市场部', position: '市场专员', salary: 10000 },
                                                                                                                                        { name: '钱七', department: '市场部', position: '市场经理', salary: 15000 },
                                                                                                                                                { name: '孙八', department: '财务部', position: '会计', salary: 11000 }
                                                                                    ],
                                                                                          // 存储合并信息的对象
                                                                                                spanArr: {
                                                                                                            name: [],
                                                                                                                    department: []
                                                                                                },
                                                                                                      // 记录上一行的值
                                                                                                            prevRow: {
                                                                                                                        name: '',
                                                                                                                                department: ''
                                                                                                            }
                                                                          }
                                                                  },
                                                                    created() {
                                                                            // 在组件创建时处理合并信息
                                                                                this.getSpanArr();
                                                                    },
                                                                      methods: {
                                                                              // 处理所有需要合并的列
                                                                                  getSpanArr() {
                                                                                            // 初始化存储合并信息的数组
                                                                                                  this.spanArr.name = [];
                                                                                                        this.spanArr.department = [];
                                                                                                              
                                                                                                                    // 遍历数据，生成合并规则
                                                                                                                          for (let i = 0; i < this.tableData.length; i++) {
                                                                                                                                      const currentRow = this.tableData[i];
                                                                                                                                              
                                                                                                                                                      // 处理姓名列
                                                                                                                                                              if (i === 0) {
                                                                                                                                                                            this.spanArr.name.push(1);
                                                                                                                                                                                      this.prevRow.name = currentRow.name;
                                                                                                                                                              } else {
                                                                                                                                                                            // 只要姓名相同就合并
                                                                                                                                                                                      if (currentRow.name === this.prevRow.name) {
                                                                                                                                                                                                      this.spanArr.name[this.spanArr.name.length - 1] += 1;
                                                                                                                                                                                                                  this.spanArr.name.push(0);
                                                                                                                                                                                      } else {
                                                                                                                                                                                                      this.spanArr.name.push(1);
                                                                                                                                                                                                                  this.prevRow.name = currentRow.name;
                                                                                                                                                                                      }
                                                                                                                                                              }
                                                                                                                                                                      
                                                                                                                                                                              // 处理部门列
                                                                                                                                                                                      if (i === 0) {
                                                                                                                                                                                                    this.spanArr.department.push(1);
                                                                                                                                                                                                              this.prevRow.department = currentRow.department;
                                                                                                                                                                                      } else {
                                                                                                                                                                                                    // 部门相同且姓名相同才合并
                                                                                                                                                                                                              if (currentRow.department === this.prevRow.department && currentRow.name === this.prevRow.name) {
                                                                                                                                                                                                                              this.spanArr.department[this.spanArr.department.length - 1] += 1;
                                                                                                                                                                                                                                          this.spanArr.department.push(0);
                                                                                                                                                                                                              } else {
                                                                                                                                                                                                                              this.spanArr.department.push(1);
                                                                                                                                                                                                                                          this.prevRow.department = currentRow.department;
                                                                                                                                                                                                              }
                                                                                                                                                                                      }
                                                                                                                          }
                                                                                  },
                                                                                      // 表格单元格合并方法
                                                                                          objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                                                                                                    // 根据列的prop属性判断是否需要合并
                                                                                                          if (column.property === 'name') {
                                                                                                                      const _row = this.spanArr.name[rowIndex];
                                                                                                                              const _col = _row > 0 ? 1 : 0;
                                                                                                                                      return {
                                                                                                                                                    rowspan: _row,
                                                                                                                                                              colspan: _col
                                                                                                                                      };
                                                                                                          }
                                                                                                                
                                                                                                                      if (column.property === 'department') {
                                                                                                                                  const _row = this.spanArr.department[rowIndex];
                                                                                                                                          const _col = _row > 0 ? 1 : 0;
                                                                                                                                                  return {
                                                                                                                                                                rowspan: _row,
                                                                                                                                                                          colspan: _col
                                                                                                                                                  };
                                                                                                                      }
                                                                                                                            
                                                                                                                                  // 职位和薪资列不合并
                                                                                                                                        return {
                                                                                                                                                    rowspan: 1,
                                                                                                                                                            colspan: 1
                                                                                                                                        };
                                                                                          }
                                                                      }
                                                            }
                                                            </script>

                                                            <style scoped>
                                                            .container {
                                                                  padding: 20px;
                                                            }

                                                            /* 为合并后的单元格添加样式，使其居中 */
                                                            .el-table .cell {
                                                                  display: flex;
                                                                    justify-content: center;
                                                                      align-items: center;
                                                            }
                                                            </style>
                                                            }
                                                            }
                                                                                                                                        }
                                                                                                                                                  }
                                                                                                                      }
                                                                                                                                      }
                                                                                                          }
                                                                                          }
                                                                                                                                                                                                              }
                                                                                                                                                                                                              }
                                                                                                                                                                                      }
                                                                                                                                                                                      }
                                                                                                                                                                                      }
                                                                                                                                                                                      }
                                                                                                                                                              }
                                                                                                                                                              }
                                                                                                                          }
                                                                                  }
                                                                      }
                                                                    }
                                                                                                            }
                                                                                                }
                                                                                    ]
                                                                          }
                                                                  }
                                                            }